<template>
  <div>
    <el-button class="insertUser" type="primary" @click="openCreateUser">新增</el-button>
    <el-table :data="userList" stripe border style="width:90%;margin: 30px auto 0;">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>

      <el-table-column label="权限">
        <template slot-scope="scope">
          {{ scope.row.role == 'worker' ? '工人' : '管理员' }}
        </template>
      </el-table-column>
      <el-table-column prop="money" label="工钱"></el-table-column>

      <el-table-column label="操作" width="400">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.role == 'worker'" type="primary"
            @click="getAuditWorker(scope.row.id); openEmpower(scope.row);">授权</el-button>
          <el-button type="danger" @click="openDeleteUser(scope.row)">删除</el-button>
          <el-button type="primary" @click="openEditUser(scope.row)">编辑</el-button>
          <el-button type="primary" @click="changeAudit(scope.row)">角色转换</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增用户" :visible="createUserVisible" :show-close="false" width="30%">
      <el-form label-width="80px" :model="userInfo">
        <el-form-item label="用户名">
          <el-input v-model="userInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userInfo.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="userInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="工钱">
          <el-input v-model="userInfo.money"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="userInfo.role" placeholder="请选择">
            <el-option key="admin" label="管理员" value="admin">
            </el-option>
            <el-option key="worker" label="工人" value="worker">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="createUser">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除用户" :visible="deleteUserVisible" :show-close="false" width="30%">
      <span>你确定删除 <span style="color: red;font-weight: bold;">{{ userInfo.name }}</span> 用户吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteUser">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="`为${userInfo.name}授权`" :visible="empowerVisible" :show-close="false" width="30%">
      <el-form>
        <el-form-item label="被管理用户">
          <el-select v-model="empowerList" placeholder="请选择" multiple>
            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="empowerVisible = false">取 消</el-button>
        <el-button type="primary" @click="empower">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑用户" :visible="editUserVisible" :show-close="false" width="30%">
      <el-form label-width="80px" :model="userInfo">
        <el-form-item label="姓名">
          <el-input v-model="userInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userInfo.password"></el-input>
        </el-form-item>
        <el-form-item label="工钱">
          <el-input v-model="userInfo.money"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import user from '@/store/user'

export default {
  data() {
    return {
      userList: [],
      createUserVisible: false,
      deleteUserVisible: false,
      empowerVisible: false,
      editUserVisible: false,
      userInfo: {
        id: '',
        username: "",
        password: "",
        name: "",
        role: "",
        money: ''
      },
      keys: [],
      empowerList: []
    }
  },
  methods: {
    getAuditWorker(id) {
      console.log(id)
      this.$http.get(`/admin/auth/getAuditWorker?admin_id=${id}`).then(res => {
        console.log(res)
        if (res.data.status == 200) {
          this.empowerList = res.data.data
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          })
        }
      })
    },
    changeAudit(data) {
      this.$http.post(`/admin/auth/changeAudit`, {
        id: data.id,
      }).then(res => {
        if (res.data.status == 200) {
          this.$message({
            type: "success",
            message: "转换成功"
          })
          this.getUserList()
        }
      })
    },
    getUserList() {
      this.$http.get("/admin/auth/getUser").then(res => {
        if (res.data.status == 200) {
          this.userList = res.data.data
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          })
        }
      })
    },
    openCreateUser() {
      this.createUserVisible = true
    },
    createUser() {
      for (let key of this.keys) {
        if (!this.userInfo[key]) {
          return this.$message({
            type: "error",
            message: "请填写所有表单项"
          })
        }
      }
      this.$http.post(`/admin/auth/createUser?username=${this.userInfo.username}&password=${this.userInfo.password}&name=${this.userInfo.name}&role=${this.userInfo.role}&money=${this.userInfo.money}`).then(res => {
        if (res.data.status == 200) {
          this.userInfo = {}
          this.getUserList()
          this.$message({
            type: "success",
            message: "创建用户成功"
          })
          this.createUserVisible = false
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          })
        }
      })
    },
    openDeleteUser(data) {
      this.userInfo = data
      this.deleteUserVisible = true
    },
    deleteUser() {
      this.$http.delete(`/admin/auth/deleteUser?id=${this.userInfo.id}`).then(res => {
        if (res.data.status == 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          })
          this.getUserList()
          this.deleteUserVisible = false
          this.userInfo = {}
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          })
        }
      })
    },
    openEmpower(data) {
      this.empowerVisible = true
      this.userInfo = data
    },
    empower() {
      this.$http.post(`/admin/auth/accredit?admin_id=${this.userInfo.id}&user_id=${this.empowerList}`).then(res => {
        if (res.data.status == 200) {
          this.$message({
            type: "success",
            message: "授权成功"
          })
          this.empowerVisible = false
          this.userInfo = {}
          this.empowerList = []
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          })
        }
      })
    },
    editUser() {
      this.$http.post(`admin/auth/updateUser`, {
        id:this.userInfo.id,
        password:this.userInfo.password,
        name:this.userInfo.name,
        money:this.userInfo.money,
      }).then(res => {
        console.log(res)
        if (res.data.status == 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.editProjectVisible = false
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
       this.getUserList()
      })
      this.editUserVisible = false
    },
    openEditUser(data) {
      this.editUserVisible = true
      this.userInfo = data
    }
  },
  mounted() {
    this.getUserList()
    this.keys = Object.keys(this.userInfo)
  }
}
</script>

<style lang="less" scoped>
.insertUser {
  margin: 20px 5% 0;
}
</style>
